<template>
  <div class="inout-charts" v-loading="loading">
    <el-row>
      <el-col :span="6">
        <p class="subject">入库/出库信息</p>
      </el-col>
      <el-col :span="18" style="text-align: right">
        <el-radio-group v-model="dimension">
          <el-radio label="w" border style="border-radius: 4px 0 0 4px"
            >本周</el-radio
          >
          <el-radio label="e" border style="border-right: 0; border-left: 0"
            >本月</el-radio
          >
          <el-radio label="c" border style="border-radius: 0 4px 4px 0"
            >全年</el-radio
          >
        </el-radio-group>
      </el-col>
    </el-row>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSumList } from '@/api/dashboard'
export default {
  name: 'InoutCharts',
  data () {
    return {
      dimension: 'w',
      xAxis: [],
      seriesleft: [],
      seriesright: [],
      myChart: null,
      loading: false
    }
  },
  created () {
    this.getSumList()
  },
  methods: {
    // 获取出入库信息
    async getSumList () {
      this.loading = true
      const res = await getSumList({ dimension: this.dimension })
      this.xAxis = res.x
      this.seriesleft = res.data[0]
      this.seriesright = res.data[1]
      this.$nextTick(() => {
        this.getChart()
      })
      this.loading = false
    },
    // 设置echarts
    getChart () {
      // 判断是否含有echarts实例，有就给它销毁掉
      if (this.myChart) this.myChart.dispose()
      this.myChart = echarts.init(this.$refs.chart)
      this.myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(223, 223, 223,0.3)'
            }
          }
        },
        legend: {
          bottom: '10px'
        },
        xAxis: {
          type: 'category',
          data: this.xAxis
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            data: this.seriesleft.data,
            name: this.seriesleft.name,
            type: 'bar',
            itemStyle: {
              color: '#ff7100'
            }
          },
          {
            data: this.seriesright.data,
            type: 'bar',
            name: this.seriesright.name,
            itemStyle: {
              color: '#ffb200'
            }
          }
        ]
      })
    }
  },
  watch: {
    dimension: {
      deep: true,
      handler () {
        this.getSumList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .inout-charts {
    margin-top: 20px;
    height: 500px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .subject {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .el-radio {
      margin-right: 0;
    }
    .el-radio.is-bordered {
      width: 70px;
      height: 36px;
      margin-left: 0;
      padding: 0;
      text-align: center;
      line-height: 36px;
      border-radius: 0;
      ::v-deep .el-radio__input {
        display: none;
      }
      ::v-deep .el-radio__label {
        padding: 0;
      }
    }
    .el-radio.is-bordered.is-checked {
      transition: all .8s;
      background-color: #ffb200;
      border-color: #ffb200;
    }
    ::v-deep .el-radio__input.is-checked+.el-radio__label{
      transition: all .7s;
      color: #fff;
    }
    .chart {
      height: 430px;
      width: 100%;
    }
  }
</style>
